<template>
  <div ref="refsSearchTagTableComponentBox">
    <div id="lib-tag-management-header" :class="[windowIsFocus === 1 ? 'window-focus' : 'window-blur']">
      <div id="lib-tag-management-header-logo">
        <el-icon :size="20">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
            <path
              d="M290.59 192c-20.18 0-106.82 1.98-162.59 85.95V192c0-52.94-43.06-96-96-96c-17.67 0-32 14.33-32 32s14.33 32 32 32c17.64 0 32 14.36 32 32v256c0 35.3 28.7 64 64 64h176c8.84 0 16-7.16 16-16v-16c0-17.67-14.33-32-32-32h-32l128-96v144c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V289.86c-10.29 2.67-20.89 4.54-32 4.54c-61.81 0-113.52-44.05-125.41-102.4zM448 96h-64l-64-64v134.4c0 53.02 42.98 96 96 96s96-42.98 96-96V32l-64 64zm-72 80c-8.84 0-16-7.16-16-16s7.16-16 16-16s16 7.16 16 16s-7.16 16-16 16zm80 0c-8.84 0-16-7.16-16-16s7.16-16 16-16s16 7.16 16 16s-7.16 16-16 16z"
              fill="currentColor"></path>
          </svg>
        </el-icon>
        <span>标签管理</span>
      </div>
      <el-input class="lib-tag-management-header-input" v-model="tagManagementSearchInput" size="small" />
      <div id="lib-tag-management-header-button-group">
        <el-button :disabled="tagManagementLockEdit || tagManagementSelection" type="success" size="small"
          @click="handleTagCreate" link>
          <el-icon :size="24">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
              <g fill="none">
                <path
                  d="M16 5.268V13a3 3 0 0 1-3 3H5.268A2 2 0 0 0 7 17h6a4 4 0 0 0 4-4V7a2 2 0 0 0-1-1.732zM11.5 9.5a.5.5 0 0 0 0-1h-2v-2a.5.5 0 1 0-1 0v2h-2a.5.5 0 0 0 0 1h2v2a.5.5 0 0 0 1 0v-2h2zM13 3a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8zm1 2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5z"
                  fill="currentColor"></path>
              </g>
            </svg>
          </el-icon>
        </el-button>
        <el-button :disabled="tagManagementLockEdit && !tagManagementSelection" @click="handleTagSelection" type="primary"
          size="small" link>
          <el-icon :size="24">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
              <g fill="none">
                <path
                  d="M6.249 5.5a.75.75 0 0 0-.75.75v7.5c0 .414.336.75.75.75h7.5a.75.75 0 0 0 .75-.75v-7.5a.75.75 0 0 0-.75-.75h-7.5zM5.25 3A2.25 2.25 0 0 0 3 5.25v9.5A2.25 2.25 0 0 0 5.25 17h9.499a2.25 2.25 0 0 0 2.25-2.25v-9.5A2.25 2.25 0 0 0 14.749 3H5.25zM4.5 5.25a.75.75 0 0 1 .75-.75h9.499a.75.75 0 0 1 .75.75v9.5a.75.75 0 0 1-.75.75H5.25a.75.75 0 0 1-.75-.75v-9.5z"
                  fill="currentColor"></path>
              </g>
            </svg>
          </el-icon>
        </el-button>
        <el-button v-show="tagManagementSelection && tagMap.size > 0" @click="handleTagSelectAll"
          :disabled="!tagManagementSelection" size="small" type="primary" link>
          <el-icon :size="24">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
              <g fill="none">
                <path
                  d="M20.496 5.627A2.25 2.25 0 0 1 22 7.75v10A4.25 4.25 0 0 1 17.75 22h-10a2.25 2.25 0 0 1-2.123-1.504l2.097.004H17.75a2.75 2.75 0 0 0 2.75-2.75v-10l-.004-.051V5.627zM17.246 2a2.25 2.25 0 0 1 2.25 2.25v12.997a2.25 2.25 0 0 1-2.25 2.25H4.25A2.25 2.25 0 0 1 2 17.247V4.25A2.25 2.25 0 0 1 4.25 2h12.997zM13.47 7.47L9.58 11.358L8.6 10.05a.75.75 0 1 0-1.2.9l1.5 2a.75.75 0 0 0 1.13.08l4.5-4.5a.75.75 0 0 0-1.06-1.06z"
                  fill="currentColor"></path>
              </g>
            </svg>
          </el-icon>
        </el-button>
        <el-button :disabled="(!tagManagementLockEdit && !tagManagementSelection) || tagManagementSelectIdSet.size === 0"
          @click="handleTagStateBatchPatch(0)" type="primary" size="small" link>
          <el-icon :size="24">
            <TurnOff />
          </el-icon>
        </el-button>
        <el-button :disabled="(!tagManagementLockEdit && !tagManagementSelection) || tagManagementSelectIdSet.size === 0"
          @click="handleTagStateBatchPatch(1)" type="primary" size="small" link>
          <el-icon :size="24">
            <Open />
          </el-icon>
        </el-button>
        <el-button :disabled="(!tagManagementLockEdit && !tagManagementSelection) || tagManagementSelectIdSet.size === 0"
          type="danger" size="small" @click="handleTagBatchDelete" link>
          <el-icon :size="24">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32">
              <path d="M12 12h2v12h-2z" fill="currentColor"></path>
              <path d="M18 12h2v12h-2z" fill="currentColor"></path>
              <path d="M4 6v2h2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h2V6zm4 22V8h16v20z" fill="currentColor">
              </path>
              <path d="M12 2h8v2h-8z" fill="currentColor"></path>
            </svg>
          </el-icon>
        </el-button>
      </div>
    </div>
    <div class="lib-table-tag-management" :style="`height: ${mainHeight}px;`">
      <template v-for="(item, index) in filterTagData" :key="index">
        <div
          :class="[tagManagementSelectIdSet.has(item.id) ? 'lib-table-tag-management-row-lock' : 'lib-table-tag-management-row-hover', 'lib-table-tag-management-row-box']">
          <div
            :class="[tagManagementSelectIdSet.has(item.id) ? 'lib-table-tag-management-row-lock' : 'lib-table-tag-management-row-hover', 'lib-table-tag-management-row']"
            v-on:dblclick="tagNameDetail(item)">
            <span class="lib-table-tag-management-row-main">
              <el-checkbox :model-value="tagManagementSelectIdSet.has(item.id)" v-show="tagManagementSelection"
                size="small" @change="handleTagSelect($event, item.id)" />
              <n-ellipsis class="lib-table-tag-management-row-value" :line-clamp="1">
                {{ item.text }}
              </n-ellipsis>
            </span>
            <div class="lib-table-tag-management-button-group">
              <el-button :disabled="tagManagementSelection || tagManagementLockEdit" type="primary"
                @click="handleTagStatePatch(item)" link>
                <el-icon :size="24" v-if="item.state === 1">
                  <Open />
                </el-icon>
                <el-icon :size="24" v-else>
                  <TurnOff />
                </el-icon>
              </el-button>
              <el-button :disabled="tagManagementSelection || tagManagementLockEdit" type="warning"
                @click="handleTagPut(item)" link>
                <el-icon :size="24">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                    <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M9 7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-3"></path>
                      <path d="M9 15h3l8.5-8.5a1.5 1.5 0 0 0-3-3L9 12v3"></path>
                      <path d="M16 5l3 3"></path>
                    </g>
                  </svg>
                </el-icon>
              </el-button>
              <el-button :disabled="tagManagementSelection || tagManagementLockEdit" type="danger"
                @click="handleTagDelete(item.id)" link>
                <el-icon :size="24">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32">
                    <path d="M12 12h2v12h-2z" fill="currentColor"></path>
                    <path d="M18 12h2v12h-2z" fill="currentColor"></path>
                    <path d="M4 6v2h2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h2V6zm4 22V8h16v20z" fill="currentColor"></path>
                    <path d="M12 2h8v2h-8z" fill="currentColor"></path>
                  </svg>
                </el-icon>
              </el-button>
            </div>
          </div>
        </div>
      </template>
    </div>
    <el-dialog v-model="tagManagementEditModal" :show-close="false"
      :title="tagManagementEditType ? createTitle : tagManagementEditTitle" :width="608">
      <el-form :inline="true" :model="newTag">
        <el-form-item label="文本" prop="textInput">
          <el-input v-model="newTag.textInput" size="small" placeholder="标签文本" />
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="newTag.type" clearable placeholder="选择类型" size="small">
            <el-option label="作者" :value="1" />
            <el-option label="关键词" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-switch v-model="newTag.state" :active-value="1" :inactive-value="0" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleTagSubmit" size="small">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
const createTitle = '创建标签'
const tagManagementEditTitle = '编辑标签'
export default {
  name: 'App',
  beforeCreate() {
    window.electronAPI.windowBlur((_event, value) => {
      if (value === 0) this.windowIsFocus = 0
    })
    window.electronAPI.windowFocus((_event, value) => {
      if (value === 1) this.windowIsFocus = 1
    })
    window.onbeforeunload = () => {
      $MyLibWindowCommunication.close()
    }
  },
  created() {
    $MyLibDbc.tag.getAll().then(res => {
      res.forEach(i => {
        this.tagMap.set(i.id, i)
      })
    })
  },
  beforeMount() {
    this.$nextTick(() => {
      // 监听浏览器高度变化，修改表格高度
      const refsTagHeader = this.$refs.refsSearchTagTableComponentBox.children[0]
      this.mainHeight = document.body.offsetHeight
        - refsTagHeader.offsetHeight
      window.addEventListener('resize', () => {
        this.mainHeight = document.body.offsetHeight
          - refsTagHeader.offsetHeight
      })
    })
  },
  computed: {
    filterTagData() {
      const set = new Set()
      for (const tag of this.tagMap.values())
        if (!this.tagManagementSearchInput || tag.text.toLowerCase().includes(this.tagManagementSearchInput.toLowerCase()))
          set.add(tag)
      return set
    }
  },
  methods: {
    handleTagCreate() {
      this.tagManagementEditModal = true
      this.tagManagementEditType = true
    },
    handleTagSelect(event, id) {
      if (event) {
        this.tagManagementSelectIdSet.add(id)
      } else
        this.tagManagementSelectIdSet.delete(id)
    },
    handleTagStatePatch(item) {
      item.state = item.state === 1 ? 0 : 1
      $MyLibDbc.tag.put(item).then()
    },
    handleTagSubmit() {
      // 创建标签
      if (this.tagManagementEditType) {
        const newTag = new TagEntity(this.newTag.textInput, this.newTag.state, this.newTag.type, new Date().toString())
        $MyLibDbc.tag.insert(newTag).then(id => {
          newTag.id = id
          this.tagMap.set(id, newTag)
          this.newTag = {
            textInput: '',
            state: 1,
            type: 0
          }
          this.$emit("update:tagManagementEditModal", false)
        })
        // 编辑标签
      } else {
        const editTag = new TagEntity(this.newTag.textInput, this.newTag.state, this.newTag.type, this.newTag.createDate)
        editTag.id = this.newTag.id
        $MyLibDbc.tag.put(editTag).then(() => {
          this.tagMap.set(editTag.id, editTag)
          this.newTag = {
            textInput: '',
            state: 1,
            type: 0
          }
          this.$emit("update:tagManagementEditModal", false)
        })
      }
    },
    handleTagPut(item) {
      this.tagManagementEditType = false
      this.newTag = {
        id: item.id,
        createDate: item.createDate,
        type: item.type,
        textInput: item.text,
        state: item.state
      },
        this.tagManagementEditTitle = `${tagManagementEditTitle} -TEXT: ${item.text} -ID: ${item.id}`
      this.tagManagementEditModal = true
    },
    handleTagDelete(id) {
      $MyLibDbc.tag.remove(id).then(() => this.tagMap.delete(id))
    },
    handleTagSelection() {
      this.tagManagementSelection = !this.tagManagementSelection
      this.tagManagementLockEdit = !this.tagManagementLockEdit
    },
    handleTagSelectAll() {
      this.tagManagementSelectAll = !this.tagManagementSelectAll
      if (this.tagManagementSelectAll)
        for (const id of this.tagMap.keys())
          this.tagManagementSelectIdSet.add(id)
      else
        this.tagManagementSelectIdSet.clear()
    },
    handleTagBatchDelete() {
      $MyLibDbc.tag.batchRemove(this.tagManagementSelectIdSet).then(() => {
        this.tagManagementSelectIdSet.forEach(id => {
          this.tagMap.delete(id)
          this.tagManagementSelection = false
          this.tagManagementLockEdit = false
        })
      })
    },
    handleTagStateBatchPatch(state) {
      const tagList = []
      for (const id of this.tagManagementSelectIdSet) {
        const tag = this.tagMap.get(id)
        tag.state = state
        tagList.push(tag)
      }
      $MyLibDbc.tag.batchPut(tagList).then()
    },
    tagNameDetail(item) {
      console.log(item)
      const val = []
      val.push('<div style="display: flex;flex-wrap: wrap;flex-direction: column;">')
      for (const key of Object.keys(item)) {
        const name = tagFieldName.get(key)
        if (name)
          val.push(`<p><strong>${name}</strong>:&nbsp;${item[key]}</p>`)
      }
      val.push('</div>')
      ElMessageBox.alert(
        val.join(''),
        // '详情',
        {
          dangerouslyUseHTMLString: true,
          showConfirmButton: false,
          closeOnClickModal: true,
          showClose: false,
          draggable: true,
        }
      ).then(emptyFunction).catch(emptyFunction)
    }
  },
  data() {
    return {
      windowIsFocus: 1,
      newTag: {
        textInput: '',
        state: 1,
        type: 0
      },
      mainHeight: 0,
      mainWidth: 0,
      tagMap: new Map(),
      tagManagementSelectAll: false,
      tagManagementLockEdit: false,
      tagManagementSelection: false,
      tagManagementEditType: false,
      tagManagementEditModal: false,
      tagManagementSearchInput: '',
      tagManagementSelectIdSet: new Set()
    }
  },
  setup() {
    return {
      createTitle, tagManagementEditTitle
    }
  },
}
</script>


<style>
html,
body,
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
    text-align: center;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.window-blur {
    /* 未选中颜色 */
    background-color: #323233;
}

.window-focus {
    /* 未选中颜色 */
    background-color: #3C3C3C;
}
.lib-table-tag-management-operate-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #252526;
}

.lib-table-tag-management-operate-group .el-button {
    margin: 0 !important;
}

.lib-table-tag-management-operate-group .el-input {
    width: 300px !important;
    margin-left: 50px;
}

.lib-table-tag-management {
    overflow: auto;
    background-color: #1E1E1E;
    width: 100%;
}

.lib-table-tag-management-row {
    width: auto;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    background-color: #1E1E1E;
    cursor: pointer;
    border-bottom: 0.5px solid #252526;
}

.lib-table-tag-management-row-box {
    padding-right: 5px;
    padding-left: 5px;
}

.lib-table-tag-management-row-lock {
    background-color: #350104;
}

.lib-table-tag-management-row-value {
    margin-left: 10px;
}

.lib-table-tag-management-row-main {
    display: flex;
    align-items: center;
}

.lib-table-tag-management-row-hover:hover {
    background-color: #333333;
}

.lib-table-tag-management-button-group .el-button {
    margin: 0 !important;
}

.lib-tag-management-header-input {
    width: 45% !important;
    height: 23.42px !important;
    -webkit-app-region: no-drag;
}
#lib-tag-management-header-button-group {
    display: flex;
    align-items: center;
    margin-right: 137px !important;
}

#lib-tag-management-header-button-group .el-button {
    -webkit-app-region: no-drag;
}

#lib-tag-management-header-button-group .el-button {
    margin: 0 !important;
}

#lib-tag-management-header-logo {
    display: flex;
    margin-left: 10px;
    align-items: center;
}

#lib-tag-management-header-logo .el-icon {
    margin-right: 10px;
}

#lib-tag-management-header {
    -webkit-app-region: drag;
    width: 100%;
    height: 33px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
